<template>
	<view class="wrap">
		<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
			<view class="section">
				<view class="font-size-lg font-weight-bold pt-30"><text class="input-required">*</text>作品名称/描述<text class="font-size-base text-color-assist ml-10">(尽可能详细)</text></view>
				<u-form-item prop="describe">
					<u-input height='300' type="textarea" placeholder="请输入作品名称/描述...(不能包含任何联系方式,照片中不能有漏点照片,否则审核不通过,5字以上)" v-model="model.describe" />
				</u-form-item>
			</view>
			<view class="section">
				<view class="font-size-lg font-weight-bold pt-30">上传照片或者视频<text class="font-size-base text-color-assist ml-10">(必须本人拍摄/本人照片)</text></view>
				<view class="d-flex justify-content-start">
					<u-upload v-if="isShowImageUpload" width="160" height="160" uploadText="上传图片" iconImg='/static/image.png' :mediaType='imageMediaType' :maxCount="9" :multiple='true' :previewFullImage="true" :auto-upload='false' @on-list-change="mediaChange"></u-upload>
					<u-upload v-if="isShowVideoUpload" width="160" height="160" uploadText="上传视频" iconImg='/static/video.png' :mediaType='videoMediaType' :maxCount="1" :multiple='true' :previewFullImage="true" :auto-upload='false' @on-list-change="mediaChange"></u-upload>
				</view>
			</view>
			<!-- <view class="section">
				<u-form-item label="谁可以看" prop="open" label-width="160">
					<u-input type="select" :select-open="openSelectChange" v-model="model.openLabel" placeholder="是否所有人可以查看" @click="openSelectChange = true"></u-input>
				</u-form-item>
				<u-form-item label="原图下载" prop="download" label-width="160">
					<u-input type="select" :select-open="openDownloadChange" v-model="model.downloadLabel" placeholder="原图是否可以下载" @click="openDownloadChange = true"></u-input>
				</u-form-item>
				<u-form-item v-if="model.downloadValue==1" label="下载收费" label-width="160">
					<u-input placeholder="下载原图收取费用(金币)" v-model="model.downloadFee" type="number" />
				</u-form-item>
			</view> -->
			<view class="section">
				<u-form-item label="拍摄设备" label-width="160">
					<u-input placeholder="请输入使用设备(选填)" v-model="model.device" />
				</u-form-item>
				<u-form-item label="拍摄地点" label-width="160">
					<view @tap="chooseLocation"><text :style="model.spaceName?'color:#606266;':'color:#C0C4CC;'">{{model.spaceName?model.spaceName:'点击选择位置坐标(选填)'}}</text> <u-icon v-if="model.spaceName" @tap.stop="spaceAddressClear" class="ml-20" style="color:#C0C4CC;" size="30" name="close-circle-fill"></u-icon> </view>
				</u-form-item>
				<u-form-item label="约拍返片" label-width="160">
					<u-input placeholder="是否约拍返片" disabled="disabled" />
					<u-switch active-color="#EED146" v-model="model.isReturnFilm" slot="right" @change='isReturnFilmChange'></u-switch>
				</u-form-item>
			</view>
			<view class="section">
				<view class="font-size-lg font-weight-bold pt-30"><text class="input-required">*</text>约拍标签</view>
				<view class='quan_release_foot'>
					<view class="quan_release_foot_photo" :class="model.styleTag.indexOf(item)==-1?'':'selected_tag'" v-for="(item,index) in initialize.shootStyleTag" :key="index" @tap="selectedStyleTag(item)">{{item}}</view>
				</view>
			</view>
		</u-form>
		<view class="footer">
			<view v-if="model.downloadValue==1" class="agreement">
				<u-checkbox @change="downloadAgreeChange" v-model="model.downloadAgree" shape="square" activeColor="#EED146"></u-checkbox>
				<view style="margin-left: -20rpx;">同意<text class="text-color-primary">《喜茶星球(付费)会员服务协议》</text></view>
			</view>
			<view class="bottom">
				<button class="w-100 border-radius-lg" type="primary" @tap="submit">发布</button>
			</view>
		</view>
		<u-select mode="single-column" :list="openList" v-model="openSelectChange" @confirm="selectOpenConfirm"></u-select>
		<u-select mode="single-column" :list="downloadList" v-model="openDownloadChange" @confirm="selectDownloadConfirm"></u-select>
	</view>
</template>

<script>
import {mapState, mapMutations } from 'vuex'
export default {
	computed:{
		...mapState(['initialize']),
	},
	data() {
		return {
			selectAlbumTypeShow:false,
			errorType: ['toast'],
			openSelectChange:false,
			openList:[{label:'所有人都可见',value:'1'},{label:'仅自己可见',value:2}],
			downloadList:[{label:'所有人都可下载',value:'1'},{label:'仅自己可下载',value:2}],
			openDownloadChange:false,
			selectedStyleTagIndex:[],
			media:[],
			imageMediaType:['image'],
			videoMediaType:['video'],
			isShowImageUpload:true,
			isShowVideoUpload:true,
			model: {
				describe:'',
				media:[],
				openLabel:'',
				openValue:'',
				downloadLabel:'',
				downloadValue:'',
				// downloadFee:'',
				device:'',
				spaceId:'',
				spaceName:'',
				spaceAddress:'',
				spaceLongitude:'',
				spaceLatitude:'',
				isReturnFilm:'',
				type:"",
				typeValue:'',
				downloadAgree:'',
				styleTag:[]
			},
			rules: {
				describe: [
					{
						required: true,
						message: '请输入作品名称/描述',
						trigger: 'blur' ,
					}
				]
				// download:[
				// 	{
				// 		required: true,
				// 		message: '请选择下载状态',
				// 		trigger: 'blur',
				// 	}
				// ]
			}
		};
	},
	onLoad(options) {
		this.model.spaceId = options.spaceId;
		this.model.spaceName = options.spaceName;
		this.model.spaceAddress = options.spaceAddress;
		this.model.spaceLongitude = options.spaceLongitude
		this.model.spaceLatitude = options.spaceLatitude
	},
	methods: {
		selectOpenConfirm(e) {
			e.map((val, index) => {
				this.model.openLabel= val.label;
				this.model.openValue = val.value;
			})
		},
		selectDownloadConfirm(e) {
			e.map((val, index) => {
				this.model.downloadLabel= val.label;
				this.model.downloadValue = val.value;
			})
		},
		downloadAgreeChange(e) {
			this.model.downloadAgree = e.value;
		},
		mediaChange(lists, name) {
			if(lists.length==0) {
				this.isShowVideoUpload = true;
				this.isShowImageUpload = true;
			}else if(lists[0].type=='image') {
				this.isShowVideoUpload = false;
			}else if(lists[0].type=='video') {
				this.isShowImageUpload = false;
			}
			this.media = lists;
		},
		isReturnFilmChange(value) {
			this.model.isReturnFilm = value;
		},
		selectedStyleTag(item) {
			let index = this.model.styleTag.indexOf(item);
			if(index==-1) {
				if(this.model.styleTag.length==5) {
					this.$u.toast("最多选择5个标签");
				}else{
					this.model.styleTag.push(item)
				}
			}else{
				this.model.styleTag.splice(index ,1);
			}
		},
		chooseLocation() {
			let that = this;
			uni.chooseLocation({
				latitude:Number(this.model.spaceLatitude),
				longitude:Number(this.model.spaceLongitude),
				success:(res)=>{
					that.model.spaceName = res.name;
					that.model.spaceAddress = res.address;
					that.model.spaceLongitude = res.longitude;
					that.model.spaceLatitude = res.latitude;
				}
			})
		},
		spaceAddressClear() {
			this.model.spaceName = "";
			this.model.spaceAddress = "";
			this.model.spaceLongitude = "";
			this.model.spaceLatitude = "";
		},
		async submit() {
			let that = this;
			
			this.$refs.uForm.validate(valid => {
				if (valid) {
					uni.showModal({
						title: '提示',
						content:'确认提交？',
						confirmText:'确认',
						success (res) {
							if (res.confirm) {
								that.request();
							}
						}
					})
				} 
			});
		},
		async request(e) {					
			uni.showLoading({mask: true,title: '提交中...'});
			uni.redirectTo({url:"/pages/jump/jump?txt=提交成功"})
			uni.hideLoading();
		}
	}
};
</script>
<style>
page {
	background-color: #F5F5F5;
}
.wrap {
	padding-bottom: 240rpx;
}
.section {
	background-color: #FFFFFF;
	padding: 0 30rpx;
	margin-top: 20rpx;
}
.quan_release_foot {
	display: flex;
	padding: 40rpx 0;
    position: relative;
    font-size: 0;
    font-family: Helvetica;
	flex-flow: wrap; 
}
.quan_release_foot_emoji, 
.quan_release_foot_goods, 
.quan_release_foot_photo, 
.quan_release_foot_video {
    position: relative;
    display: inline-block;
	padding: 10rpx 40rpx;
    color: #666;
    font-size: 28rpx;
    text-align: center;
    border-radius: 60rpx;
    background-color: #f5f5f5;
	margin-bottom: 20rpx;
	margin-right: 10rpx;
}
.input-required {
	vertical-align: middle;
	color: #fa3534;
}
.selected_tag {
	background-color: rgb(239, 210, 52);
}
</style>
<style scoped lang="scss">
.footer {
	position: fixed;
	bottom: 0;
	width: 100%;
	display: flex;
	flex-direction: column;
	background-color: #FFFFFF;
	z-index: 10;
	
	.agreement {
		display: flex;
		align-items: center;
		padding: 20rpx 20rpx 0 20rpx;
		font-size: $font-size-sm;
		color: $text-color-assist;
		
		// uni-checkbox /deep/.uni-checkbox-input {
		// 	width: 34rpx;
		// 	height: 34rpx;
		// }
	}
	
	.bottom {
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		
		button {
			border-radius: 0 !important;
		}
	}
}
</style>
